<template>
	<view class="store">
		<view class="title">
			<image
      	src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/title.png"
    	/>
			<view class="tab"> 
				<view :class="['li', {'active': index === curIndex}]" v-for="(item, index) in tabList" @click="onTabClick(index)">{{ item.label }}</view>
			</view>
		</view>
		<image
      mode="widthFix"
      class="closeIcon"
      @click="onHandleClose"
      src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/close.png"
    />
		<view class="content">
			
			<view  style="position: relative;"  class="item" v-for="(item,index) in storeList" :key="item.img">
				<view @click="xuanze(index)" style="position: absolute;z-index: 1;width: 100%;height: 100%;background: rgba(0,0,0,0.2);text-align: center;display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 16px;">
					{{item.name}}
				</view>
				<image
					:src="item.icon_image"
					mode="scaleToFill"
				/>
				<view class="money">
					<image
						src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/money.png"
						mode="scaleToFill"
						class="price"
					/>
					<text>{{ item.price||item.seed_cost }}</text>
				</view>
			</view>
			<view class="bottom">
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/button.png"
					mode="scaleToFill"
				/>
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/arrow.png"
					mode="scaleToFill"
				/>
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/button.png"
					mode="scaleToFill"
				/>
			</view>
		</view>
	</view>
</template>
<script>
import {
	baseURL,
	platform
} from "@/common/config.js"	
export default {
	props:['dialogTitle','storeList'],
	data() {
		return {
			baseURL:baseURL,
			// storeList: [
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store1.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store2.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store3.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store4.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store5.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store6.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store7.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store8.png'),
			// 		price: 100
			// 	},
			// 	{
			// 		img: require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store9.png'),
			// 		price: 100
			// 	}
			// ],
			tabList: [
				{
					value: '1',
					label: '道具'
				},
				{
					value: '2',
					label: '食物'
				}
			],
			curIndex: 0
		}
	},
	methods: {
		onHandleClose() {
			this.$emit('onCloseClick')
		},

		onTabClick(index) {
			this.curIndex = index
			this.$emit('type',index)
		},
		xuanze(e){
			console.log(e,this.storeList,'eeeeeeeeeeeeeeee')
			this.$emit('select',[this.curIndex,this.storeList[e]])
		},
	}
}
</script>

<style scoped>
.store {
	position: relative;
	border-top-left-radius: 200rpx;
	border-top-right-radius: 200rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/bg.png');
}
.store .title {
	width: 100%;
	height: 200rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/title-bg.png');
	background-size: 100% 100%;
	border-top-left-radius: 20rpx;
	font-size: 50rpx;
	color: #af5c0b;
	font-weight: 800;
	letter-spacing: 8rpx;
	margin-bottom: 0 !important;
}
.store .title image {
	width: 50%;
	height: 150rpx;
	margin-top: -60rpx;
}
.store .closeIcon {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
}
.content {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	border: 20rpx solid #ecb12d;
	border-top: none;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.content .item {
	width: 30%;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store-bg.png');
	background-size: 100% 100%;
	margin: 40rpx 0 0 0;
}
.item image {
	width: 100rpx;
	height: 100rpx;
}
.item .money {
	width: 70%;
	height: 60rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/money-bg.png');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}
image.price {
	width: 60rpx;
	height: 60rpx;
	margin: -10rpx 0 0 -20rpx
}
.item text {
	color: #fbe4b0;
	font-weight: 600;
	margin: -10rpx 0 0 20rpx
}
.bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
}
.bottom image {
	width: 60rpx;
	height: 60rpx;
}
.tab {
	display: flex;
	justify-content: center;
}
.tab .li {
	color: #ecb12d;
	font-weight: 500;
	font-size: 40rpx;
	padding: 10rpx 20rpx;
	border: 4rpx solid #af5c0b;
}
.tab .li:nth-child(1) {
	border-top-left-radius: 20rpx;
	border-bottom-left-radius: 20rpx;
	border-right: none;
}
.tab .li:nth-child(2) {
	border-top-right-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.tab .li.active {
	background: #af5c0b;
	color: #fff;
}
</style>